<template>
  <div class="content">
    <div class="top flex-between">
      <div class="chart-wrap wrap-bar">
        <div class="title-con flex-between">
          <div class="left flex-center">
            <div class="icon"></div>
            <div class="tit"></div>
          </div>
          <div class="right flex-center-column">
            <!-- <div class="btn flex-center">
              <div class="icon"></div>
              <span>导出</span>
            </div> -->
            <div class="time flex-center">
              <div
                v-for="item in timeTabs"
                :key="item.name"
                class="tab flex-center"
                :class="[timeChoosed == item.id ? 'active' : '']"
                @click="changeTimeTabs(item)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="bar-chart-con">
          <!-- 需求更改 已调换位置 -->
          <lineChart
            :xAxis="lineChartData.xAxis"
            :value="lineChartData.value"
            :legend="lineChartData.legend"
          />
          <!-- <lineChart /> -->
        </div>
      </div>
      <div class="chart-wrap wrap-pie">
        <div class="title-con flex-between">
          <div class="left flex-center">
            <div class="icon"></div>
            <div class="tit tit-pie"></div>
          </div>
          <div class="right flex-center-column">
            <!-- <div class="btn flex-center">
              <div class="icon"></div>
              <span>导出</span>
            </div> -->
          </div>
        </div>
        <div class="pie-chart-con">
          <typePie :typePieData="typePieData" />
        </div>
      </div>
    </div>
    <div class="bottom flex-between">
      <div class="bot-pie-wrap">
        <div class="title-con flex-between">
          <div class="left flex-center">
            <div class="icon"></div>
            <div class="tit tit-bot"></div>
          </div>
          <div class="right flex-center-column">
            <!-- <div class="btn flex-center">
              <div class="icon"></div>
              <span>导出</span>
            </div> -->
            <el-select v-model="value" placeholder="请选择" @change="tabTags">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="bot flex-center">
          <div class="chart-con">
            <tagPieChart
              :legend="tagPieChartData.legend"
              :value="tagPieChartData.value"
            />
          </div>
        </div>
      </div>
      <div class="bot-pie-wrap">
        <div class="title-con flex-between">
          <div class="left flex-center">
            <div class="icon"></div>
            <div class="tit tit-bar"></div>
          </div>
          <div class="right flex-center-column">
            <!-- <div class="btn flex-center">
              <div class="icon"></div>
              <span>导出</span>
            </div> -->
          </div>
        </div>
        <div class="bot flex-center">
          <div class="chart-con">
            <barChart
              :xAxis="barChartData.xAxis"
              :value="barChartData.value"
              :legend="barChartData.legend"
            ></barChart>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import barChart from "@/components/dataStatistics/barChart.vue";
import typePie from "@/components/dataStatistics/pieChart.vue";
import tagPieChart from "@/components/dataStatistics/tagPieChart.vue";
import lineChart from "@/components/dataStatistics/lineChart.vue";
export default {
  components: {
    barChart,
    typePie,
    tagPieChart,
    lineChart,
  },
  data() {
    return {
      timeChoosed: "weekData",
      timeTabs: [
        {
          id: "weekData",
          name: "周",
        },
        {
          id: "monthDatas",
          name: "月",
        },
        // {
        //   id: "3",
        //   name: "年",
        // },
      ],
      lineChartOriginData: {},
      lineChartData: {
        xAxis: [],
        value: [],
        legend: [],
      },
      barChartData: {
        xAxis: [],
        value: [],
      },
      tagPieChartData: {
        legend: [],
        value: [],
      },
      typePieData: [],
      options: [],
      value: "",
    };
  },
  created() {
    // 数据统计 根据时间进行统计  折线图
    this.timeStatistics();
    // 数据统计 根据标签组进行统计
    // this.labelStatistics();

    // 数据统计 类别统计
    this.queryTypeStatistics();
    // 数据统计 工作量统计
    // this.queryWorkStatistics();
    this.userStatistics();
    this.findAllTags();
  },
  methods: {
    // 数据遍历处理  点击 月周 切换
    changeTimeTabs(item) {
      this.timeChoosed = item.id;
      this.lineChartData.xAxis = this.lineChartOriginData[item.id].map(
        (item) => {
          return item.time;
        }
      )[0];
      this.lineChartData.legend = this.lineChartOriginData[item.id].map(
        (item) => {
          return item.type;
        }
      );
      this.lineChartData.value = this.lineChartOriginData[item.id].map(
        (item) => {
          return item.num;
        }
      );
    },
    // 切换标签饼图
    tabTags(e) {
      // console.log(e, this.options);
      // for (let i = 0; i < this.options.length; i++) {
      //   if (this.options[i].name === e) {
      //     console.log(123, this.options[i].id);
      //     this.$api.findByGroupIdQuery(this.options[i].id).then((res) => {
      //       console.log(res);
      //       this.tagPieChartData.legend = res.map((item) => {
      //         return item.categoryName;
      //       });
      //       this.tagPieChartData.value = res.map((item) => {
      //         return { value: item.id, name: item.categoryName };
      //       });
      //     });
      //   }
      // }
      this.$api.getGroupLableStatistics({ name: e }).then((res) => {
        console.log(res);
        this.tagPieChartData.legend = res.map((item) => {
          return item.labelName;
        });
        this.tagPieChartData.value = res.map((item) => {
          return { value: item.NUMBER, name: item.labelName };
        });
      });
    },
    // 获取标签组
    async findAllTags() {
      let data = await this.$api.findAllTags();
      this.options = data;
      console.log(data);
      this.value = data[0].name;
      this.$api.getGroupLableStatistics({ name: data[0].name }).then((res) => {
        console.log(res);
        this.tagPieChartData.legend = res.map((item) => {
          return item.labelName;
        });
        this.tagPieChartData.value = res.map((item) => {
          return { value: item.NUMBER, name: item.labelName };
        });
      });
    },
    async timeStatistics() {
      let data = await this.$api.timeStatistics();
      console.log(999, data);
      this.lineChartOriginData = data;
      this.lineChartData.xAxis = data.weekData.map((item) => {
        return item.time;
      })[0];
      this.lineChartData.legend = data.weekData.map((item) => {
        return item.type;
      });
      this.lineChartData.value = data.weekData.map((item) => {
        return item.num;
      });
    },
    // 饼状图数据 标签
    async labelStatistics() {
      let data = await this.$api.labelStatistics();
      console.log(data);
      this.tagPieChartData.legend = data.map((item) => {
        return item.typeName;
      });
      this.tagPieChartData.value = data.map((item) => {
        return { value: item.num, name: item.typeName };
      });
    },
    // 新 柱状图数据 userStatistics
    async userStatistics() {
      let data = await this.$api.userStatistics();
      /* this.barChartData.xAxis = data.map((item) => {
        return item.user;
      })[0];
      (this.barChartData.value = data.map((item) => {
        return item.num;
      })),
        (this.barChartData.legend = data.map((item) => {
          return item.type;
        })),
        console.log(90, this.barChartData.legend); */
      this.barChartData.xAxis = data.xAxis
      this.barChartData.value = data.value
      this.barChartData.legend = data.legend  
    },
    // 饼状图数据 类别
    async queryTypeStatistics() {
      let data = await this.$api.sumStatistics();
      this.typePieData = data;
    },
    // async queryWorkStatistics() {
    //   let data = await this.$api.queryWorkStatistics();
    //   console.log("数据统计", data);
    //   // 数据处理
    // },
  },
};
</script>

<style lang="scss" scoped>
.content {
  margin: 0 auto;
  // margin-bottom: 0.3rem;
  width: 18.4rem;
  // height: calc(100% - 0.76rem);
  overflow: auto;
  .title-con {
    align-items: flex-start;
    padding: 0 0.2rem;
    margin-top: 0.2rem;
    color: #ffffff;
    // overflow: auto;
    .left {
      .icon {
        width: 0.13rem;
        height: 0.2rem;
        background-image: url(~@/assets/images/group56@2x.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
      }
      .tit {
        margin-left: 0.15rem;
        width: 1.01rem;
        height: 0.2rem;
        background-image: url(~@/assets/images/workload_statistics@2x.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        &.tit-pie {
          width: 0.8rem;
          height: 0.19rem;
          background-image: url(~@/assets/images/category_statistics@2x.png);
        }
        &.tit-bar {
          width: 1.01rem;
          height: 0.2rem;
          background-image: url(~@/assets/images/workload_statistics@2x.png);
        }
      }
    }
    .right {
      align-items: flex-end;
      ::v-deep.el-input__inner {
        height: 0.4rem;
        width: 1.6rem;
        background: #1890ff;
        border: 1px solid #1890ff;
        font-size: 0.14rem;
        color: #ffffff;
      }
      ::v-deep.el-input__suffix {
        height: 0.46rem;
      }
      .time {
        margin-top: 0.16rem;
        .tab {
          border: 0.01rem solid #62656c;
          width: 0.44rem;
          height: 0.26rem;
          border-radius: 0.02rem 0rem 0rem 0.02rem;
          &.active {
            background: #1890ff;
          }
        }
      }
      .btn {
        width: 0.84rem;
        height: 0.26rem;
        background: #1890ff;
        border-radius: 0.05rem;
      }
      .icon {
        margin-right: 0.1rem;
        width: 0.14rem;
        height: 0.14rem;
        background-image: url(~@/assets/images/export@2x.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
      }
    }
  }
  .chart-wrap {
    background: rgba(3, 69, 118, 0.5);
    &.wrap-bar {
      width: 10.44rem;
      height: 4.7rem;
    }
    &.wrap-pie {
      width: 7.76rem;
      height: 4.7rem;
    }
  }
  .bar-chart-con {
    height: 3.6rem;
  }
  .pie-chart-con {
    height: 4rem;
  }
  .top {
    margin-top: 0.2rem;
  }
  .bottom {
    margin-top: 0.2rem;
    overflow: hidden;
    height: 4.69rem;
    .bot-pie-wrap {
      height: 100%;
      width: 9.1rem;
      // background: #2f2f2f;
      background: rgba(3, 69, 118, 0.5);
    }
    .bot {
      .chart-con {
        width: 100%;
        height: 4rem;
      }
    }
    .tit {
      margin-left: 0.15rem;
      width: 1.01rem;
      height: 0.2rem;
      background-image: url(~@/assets/images/workload_statistics@2x.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
      &.tit-bot {
        width: 0.8rem;
        height: 0.19rem;
        background-image: url(~@/assets/images/tag_statistics@2x.png);
      }
    }
  }
}
</style>